{extend name="template/base_default"}
{block name="header"}

<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<script src="__JS__/updown.js"></script>
<script src="__JS__/lazyimg.js"></script>
<style>

    body{
        background-image:url("__IMG__/bj.png");
        background-repeat:no-repeat;
        background-size:cover;
        display:inline-block;
        text-align: center;
        color:#eeeeee;
        width: 100%;
        background-attachment: fixed;
    }
    .v-head{
        margin: auto;
        position:fixed;
        top:20px;
        width: 100%;
        z-index: 100;
        background-color: #010D1A;
        height:80px;

    }
    li{
        list-style: none;
    }
    .v-body{
        margin-top: 100px;
        z-index: -1;
    }
    .textItem{
        padding-left: 10px;
        margin-top: 26px;
        width:90%;
        height:96px;
        background-color: rgba(95, 110, 170, 0.4);
        margin-left: auto;
        margin-right: auto;
        color:white;
        border-radius: 10px;
        text-align: left;
        margin-top: 16px;
    }
    .jf{

        width: 50%;
        height: 21px;
        text-align: center;

        margin: auto 25%;

    }
    .jf img{
        height: 20px;
        width: 20px;
        float: left;
    }
    .jf p{
        margin-left: 3px;
        height: 20px;
        line-height: 20px;
        float: left;
    }
    .titleList ul{
        border-radius: 25px;

        width:95%;
        margin: auto 2.5%;
        background-color: rgba(95, 110, 170, 0.4);
        text-align: center;
    }
   .lileft{
        float:left;
        height:auto;
        min-height:40px;
        color:#eeeeee;
       border: 1px solid #dddddd;
        font-size:16px;
       border-radius: 25px 0 0 25px;
        width:49%;
        text-align: center;
        line-height: 40px;
        list-style-type:none;
    }
    .liright{
        float:left;
        height:auto;
        min-height:40px;
        border: 1px solid #dddddd;
        color:#eeeeee;
        border-radius: 0 25px 25px 0;
        font-size:16px;
        width:49%;
        text-align: center;
        line-height: 40px;
        list-style-type:none;
    }
    .selected{
        background-color: rgba(255, 255, 255, 0.3);
    }
    .titleList ul li{
        line-height: 50px;
        height:50px;
        width:100%;
        margin-top: 20px;
    }
    .main-wrap{
        padding-bottom: 20px;
        padding-top: 20px;
    }
    .time{
        height:30px;
        line-height: 30px;
    }
    .today-cash{
        position:fixed;
        top:0;
        width:100%;
        height:26px;
        line-height: 26px;
        background-color: #010D1A;
        z-index: 9999;
    }
</style>
{/block}
{block name="body"}

<div class="today-cash">当日实收金额：{$countInfo.income/100}</div>
<div class="v-head">

<div  class="titleList" style="width: 100%; padding:auto">
    <ul>
        <li >消费记录</li>
    </ul>
</div>

</div>
<div id="scores_list" class="v-body">


</div>

{/block}
{block name="footer"}
<script type="text/javascript" src="__JS__/public.js"></script>
<script>
    $(function(){
        var doClss = 'dropload-down';
        var seller_id = "{$seller_id}";
        var page=0;//页数
        $('#scores_list').dropload({
            scrollArea : window,
            autoLoad : true,//自动加载
            domDown : {
                domClass   : doClss,
                domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
                domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
                domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
            },
            loadDownFn : function(me){
                page++;
             //   window.history.pushState(null, document.title, window.location.href);
                var result = '';
                $.ajax({
                    type: 'GET',
                    url:getBaseUrl()+'/web.php/extension/shop_consumption_data.html?page='+page+'&seller_id='+seller_id,
                    dataType: 'json',
                    success: function(data){
                        var arrLen = data.data.length;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                var date = new Date(parseInt(data.data[i].create_time) * 1000).toLocaleString();
                                result+='<div class="textItem">'
                                    +'<ul>'
                                    +'<li class="time">消费金额:'+data.data[i].amount/100+'</li>'
                                    +'<li class="time">实收金额:'+data.data[i].income/100+'</li>'
                                    +'<li class="time">'+date+'</li>'
                                    +'</ul>'
                                    +'</div>'
                                ;
                            }
                            // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }

                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('.'+doClss).before(result);
                            var lazyloadImg = new LazyloadImg({
                                el: '.weui-updown [data-img]', //匹配元素
                                top: 50, //元素在顶部伸出长度触发加载机制
                                right: 50, //元素在右边伸出长度触发加载机制
                                bottom: 50, //元素在底部伸出长度触发加载机制
                                left: 50, //元素在左边伸出长度触发加载机制
                                qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
                                load: function(el) {
                                    el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
                                },
                                error: function(el) {

                                }
                            });
                            //
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },10);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.lock();
                    }
                });
            }
        });
    })
</script>
{/block}